<template>
  <el-container>
    <el-header class="page-header">
      <home-header></home-header>
    </el-header>
    <el-container>
      <el-main class="page-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { HomeHeader, HomeContent } from "./components";
import { mapState, mapActions } from "vuex";
import store from "../../../vuex/index";
export default {
  components: {
    HomeHeader,
    HomeContent
  },
  data() {
    return {
      editableTabsValue: "2",
      editableTabs: [
        {
          title: "Tab 1",
          name: "1",
          content: "Tab 1 content"
        },
        {
          title: "Tab 2",
          name: "2",
          content: "Tab 2 content"
        }
      ],
      tabIndex: 2
    };
  },
  computed: {
    ...mapState(["global"])
  },
  methods:{
    ...mapActions['getProjectList']
  },
  created(){
   store.dispatch("getProjectList");
  }
};
</script>
<style>
html,
body {
  font: 13px/1.7 PingFangSC-Regular, microsoft yahei, Arial, sans-serif;
  color: #444;
}

body,
button,
input,
select,
textarea {
  font-family: "helvetica neue", arial, "hiragino sans gb", stheiti, "wenquanyi micro hei",
    \5fae\8f6f\96c5\9ed1, \5b8b\4f53, sans-serif;
  -ms-text-autospace: ideograph-alpha ideograph-numeric ideograph-parenthesis;
  text-spacing: ideograph-alpha ideograph-numeric ideograph-parenthesis;
}

.page-header {
  box-shadow: 1px 2px 10px rgba(#000, 0.1);
}
.page-main {
  height: calc(100vh - 60px);
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
*:focus {
  outline: none;
}
</style>
